<template>
    <div class="dashboard">
      <el-container>
        <el-header>
          <div class="header-content">
            <h1>个人中心</h1>
            <el-button @click="handleLogout">退出登录</el-button>
          </div>
        </el-header>
        
        <el-main>
          <el-card>
            <template #header>
              <h3>用户信息</h3>
            </template>
            
            <el-descriptions :column="2" border>
              <el-descriptions-item label="用户名">
                {{ authStore.user?.username }}
              </el-descriptions-item>
              <el-descriptions-item label="邮箱">
                {{ authStore.user?.email }}
              </el-descriptions-item>
              <el-descriptions-item label="手机号">
                {{ authStore.user?.phone || '未设置' }}
              </el-descriptions-item>
              <el-descriptions-item label="角色">
                {{ authStore.user?.role === 'admin' ? '管理员' : '普通用户' }}
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-main>
      </el-container>
    </div>
  </template>
  
  <script setup>
  import { useAuthStore } from '@/store/auth'
  import { ElMessage } from 'element-plus'
  
  const authStore = useAuthStore()
  
  const handleLogout = async () => {
    await authStore.logout()
    ElMessage.success('已退出登录')
  }
  </script>
  
  <style scoped>
  .dashboard {
    min-height: 100vh;
  }
  
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
  }
  </style>